<template>
	<view>
		<!--骨架屏-->
		<view class="sk_tabs_box" v-if="sk_tabs_show">
			<up-row justify="space-between" gutter="10">
				<up-col span="2" v-for="item in 6" :key="item">
					<view class="sk_tabs"></view>
				</up-col>
			</up-row>
		</view>
		<!--tabs内容-->
		<up-sticky offset-top="0" bg-color="#fff" v-else>
			<up-tabs :current="current" @click='reset' :list="selectList" lineColor="#e20505" :activeStyle="{
	        color: '#e20505',
			fontWeight: 'bold',
	    }" :itemStyle="{width:'20%',height:'88rpx'}" :inactiveStyle="{
	        color: '#303133',
	       
	    }"></up-tabs>
		</up-sticky>
		<!--骨架屏-->
		<view class="sk_container" v-if="skeleton_loading">
			<view class="sk_list" v-for="item in 5" :key="item">
				<up-skeleton rows="3" avatarSize="120rpx" avatarShape="square" avatar></up-skeleton>
			</view>
		</view>
		<!--页面内容-->
		<view v-if="!skeleton_loading">

			<view class="list_container" v-if="list.length>0">
				<view class="orderList" v-for="(item,index) in list" :key="index">
					<view class="orderList_title" @click="goPage(item)">
						<view>订单号：{{item.orderNo}}</view>
						<view>
							<up-text v-if="item.status == 0" text="待付款" type="error"></up-text>
							<up-text v-if="item.status == 1" text="待使用" type="error"></up-text>
							<up-text v-if="item.status == 2" text="付款失败" type="info"></up-text>
							<up-text v-if="item.status == 3" text="用户取消" type="info"></up-text>
							<up-text v-if="item.status == 4" text="退款申请中" type="warning"></up-text>
							<up-text v-if="item.status == 5" text="已退款" type="info"></up-text>
							<up-text v-if="item.status == 6" text="已关闭" type="info"></up-text>
							<up-text v-if="item.status == 7" text="服务中" type="warning"></up-text>
							<up-text v-if="item.status == 8" text="订单完成" type="info"></up-text>
						</view>
					</view>

					<view class="orderList_content" @click="goPage(item)">
						<view class="orderList_content_left">
							<up-image width="120rpx" height="120rpx" :src="JSON.parse(item.serviceSnapshot).icon"
								:lazy-load="true" mode="aspectFill"></up-image>
						</view>
						<view class="orderList_content_right">
							<view class="right_title1">
								<view><up-text :lines="2"
										:text="JSON.parse(item.serviceSnapshot).serviceName"></up-text>
								</view>
								<view><up-text type="info" :lines="1"
										:text="JSON.parse(item.serviceSnapshot).serviceTime"></up-text></view>
							</view>
							<view class="content_price">
								<view><up-text align="right" mode="price" :text="item.money"></up-text></view>
								<view>x{{item.buyCount}}</view>
							</view>
						</view>
					</view>
					<view class="orderList_down">
						<view class="times">
							<up-row>
								<up-col span="9">
									<up-text type="info" size="24rpx" :text="item.createdAt"></up-text>
								</up-col>
								<up-col span="3">
									<up-button v-if="item.status==0" :loading="item.loading"
										@tap.stop="onplay(item,index)" size="small" type="error" :plain="true"
										shape="circle" text="付款"></up-button>

									<up-button v-if="item.status==7" :loading="item.loading"
										@tap.stop="complete(item,index)" size="small" type="error" :plain="true"
										shape="circle" text="完成服务"></up-button>

									<up-button v-if="item.status==8" :loading="item.loading" @tap.stop="onComment(item)"
										size="small" type="warning" :plain="true" shape="circle" text="评价"></up-button>

									<up-button v-if="item.status==1" :loading="item.loading" @tap="onrefund(item,index)"
										size="small" type="error" :plain="true" shape="circle" text="退款申请"></up-button>
								</up-col>
							</up-row>
						</view>
						<view class="remark" v-if="item.remark">
							<up-text type="info" size="24rpx" :text="`备注：${item.remark}`"></up-text>
						</view>
					</view>
				</view>
			</view>
			<view class="loadmore" v-if="list.length>0">
				<up-loadmore :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText"
					:status="status" />
			</view>
			<view v-if="list.length==0" class="empty_box">
			</view>
			<view class="tabBarBottom"></view>
		</view>
	</view>
</template>

<script>
	import {
		getUserOrderListApi,
		createOrderApi,
		orderFinishApi,
		orderDetialApi,
		repayOrderApi,
		orderCallbackApi,
	} from '@/api/order.js'
	import {
		playOrder
	} from '@/utils/play.js'

	import {
		onLoad,
		onUnload,
		onReachBottom,
		onPullDownRefresh,
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {

		setup() {
			const state = reactive({

				selectList: [{
						name: '全部',
						value: '0,1,2,3,4,5,6,7,8,9,10',
					},
					{
						name: '待付款',
						value: 0,

					},
					{
						name: '待使用',
						value: 1,

					},
					{
						name: '待评价',
						value: 8,
					},

					{
						name: '退款/售后',
						value: '5,4,9,10',
					},


				],
				current: 0,
				queryForm: {
					pageSize: 10,
					page: 1,
					status: '0,1,2,3,4,5,6,7,8,9,10',
				},
				skeleton_loading: true,
				sk_tabs_show: true,
				total: 0,
				status: 'loadmore',
				loadingText: '正在加载...',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				list: [],
			})
			onLoad((option) => {
				getData()
			})

			//下接刷新
			onPullDownRefresh(() => {
				state.queryForm.page = 1
				state.skeleton_loading = true
				state.sk_tabs_show = true
				state.list.length = 0
				getData()
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			})
			//上拉加载
			onReachBottom(() => {
				let page = state.queryForm.pageSize * state.queryForm.page
				if (state.total > page) {
					state.queryForm.page++
					getData()
				} else {
					state.status = 'nomore'
				}

			})
			const reset = (item) => {
				state.queryForm.status = item.value
				state.queryForm.page = 1
				getData()
			}
			//获取列表数据
			const getData = async () => {
				state.status = 'loading'
				if (state.queryForm.page == 1) {
					state.skeleton_loading = true
					state.list = [];
				}
				const {
					data
				} = await getUserOrderListApi(state.queryForm)

				uni.stopPullDownRefresh()
				state.total = data.total
				if (state.total <= state.queryForm.pageSize) {
					state.status = 'nomore'
					state.list = data.records
					state.skeleton_loading = false
					state.sk_tabs_show = false
					return false
				}
				if (state.total > state.queryForm.pageSize) {
					setTimeout(() => {
						state.list = state.list.concat(data.records)
						state.skeleton_loading = false
						state.sk_tabs_show = false
						state.status = 'loadmore'
					}, 1000)
				}

			}

			const onplay = async (item, index) => {
				console.log(item)
				state.list[index].loading = true
				try {
					const {
						data
					} = await repayOrderApi(item.orderNo)
					playOrder(data, index).then((res) => {
						state.list[index].loading = false
						getData()
					}).catch(() => {
						state.list[index].loading = false
					})
				} catch {
					state.list[index].loading = false

				}


			}

			const goPage = (item) => {
				if (item.status == 0)
					uni.navigateTo({
						url: '/pages/my/serviceOrder/orderDetail?orderNo=' + item.orderNo
					})
				else
					uni.navigateTo({
						url: '/subpages/order/detail?orderNo=' + item.orderNo
					})
			}
			const onrefund = (item) => {
				uni.navigateTo({
					// url: '/pages/order/orderDetail?orderNo=' + item.orderNo
					url: '/subpages/order/refund?orderNo=' + item.orderNo
				})
			}
			const onComment = (row) => {
				let data = JSON.parse(row.serviceSnapshot)
				console.log(data)
				uni.navigateTo({
					url: `/pages/comment/index?serviceId=${data.uid}&uid=${row.uid}`
				})

			}
			const complete = (row) => {

				uni.showModal({
					title: '提示',
					content: '确定服务已完成？',
					success: async (res) => {
						if (res.confirm) {
							await orderFinishApi({
								orderNo: row.orderNo
							})
							getData()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			}

			return {
				...toRefs(state),
				goPage,
				onComment,
				complete,
				reset,
				getData,
				onplay,
				onrefund
			}
		}

	}
</script>


<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style scoped lang="scss">
	.tabs_box {
		margin-top: 180rpx;
	}

	.sr_title {
		width: 100%;
		height: 180rpx;
		background-color: #38393E;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;

		.sr_title1 {
			width: 100%;
			height: 40%;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;

			view:nth-child(1) {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 12%;
					height: 100%;
					margin: 0 5%;
				}
			}

			view:nth-child(2) {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			view:nth-child(3) {
				width: 20%;
				height: 100%;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				margin-bottom: 2%;
				font-size: 25rpx;

				image {
					width: 18%;
					height: 10%;
				}
			}
		}
	}


	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.list_container {
		margin-top: 1rpx;
	}

	.orderList {
		width: 100%;
		background-color: white;
		margin-top: 20rpx;

		.orderList_title {
			width: 100%;
			height: 5vh;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			view:nth-child(1) {
				margin-left: 3%;
			}

			view:nth-child(2) {
				margin-right: 3%;
				color: #999;
				font-size: 26rpx;
			}
		}

		.orderList_content {


			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 20rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #eaeaea;

			.orderList_content_left {
				width: 140rpx;
				height: 100%;
				display: flex;
				align-items: center;

			}

			.orderList_content_right {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.right_title1 {
					flex: 1;
					height: 100%;
				}

				.content_price {
					width: 180rpx;
					height: 100%;
					align-items: center;
					justify-content: center;

					view:nth-child(2) {
						text-align: right;
						color: #767676;
					}
				}
			}
		}

		.orderList_down {
			width: 100%;

			.times {
				padding: 20rpx;
				// padding-bottom: 0;
			}

			.remark {
				padding: 20rpx;
			}
		}
	}
</style>